import { StyleSheet, View, TouchableOpacity, Image, TextInput } from 'react-native'
import React from 'react'

import icon_search from '@/assets/images/icon_search.png'
import icon_menu_more from '@/assets/images/icon_menu_more.png'
import icon_arrow from '@/assets/images/icon_arrow.png'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'

const Search = () => {
  const navigation = useNavigation<StackNavigationProp<any>>()
  return (
    <View style={styles.header}>
      {/* 搜索 */}
      <TouchableOpacity activeOpacity={0.7} onPress={() => navigation.goBack()}>
        <Image source={icon_arrow} style={styles.iconArrow}></Image>
      </TouchableOpacity>
      <View style={styles.searchLayout}>
        <Image source={icon_search} style={styles.iconSearch}></Image>
        <TextInput placeholder="小米 14" style={styles.input} selectionColor="#f92845"></TextInput>
      </View>
      <Image style={styles.iconMenu} source={icon_menu_more}></Image>
    </View>
  )
}

export default Search

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 46,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    overflow: 'hidden'
  },
  searchLayout: {
    flex: 1,
    height: '70%',
    backgroundColor: '#efefefef',
    marginLeft: 15,
    borderRadius: 20,
    flexDirection: 'row',
    alignItems: 'center'
  },
  iconArrow: {
    width: 22,
    resizeMode: 'contain'
  },
  input: {
    flex: 1,
    height: 50,
    paddingHorizontal: 10
  },
  iconSearch: {
    width: 24,
    height: 24,
    resizeMode: 'contain',
    tintColor: '#929292',
    marginLeft: 8
  },
  searchTxt: {
    marginLeft: 8
  },
  iconMenu: {
    width: 30,
    height: 30,
    resizeMode: 'contain',
    marginLeft: 12
  }
})
